<template>
	<view class="allPage">
		<view style="width: 100%;height: 140rpx;background: white;">

		</view>
		<view
			style="width: calc(100% - 120rpx);height: auto; background:#EEEEEE;margin-left: 60rpx;margin-right: 60rpx;padding-bottom: 20rpx;">
			<view style="width: 100%;text-align: center;">
				<img style="margin-top: -60rpx;width: 120rpx;height: 120rpx;" :src="q_logo" alt="">
			</view>
			<view style="width: 100%;text-align: center;margin-top: 20rpx;">
				<h5 style="">金额</h5>
				<h1 style="'Helvetica Neue', sans-serif;font-weight: 600;font-size: 60rpx;">￥{{payFee}}</h1>
				<h3 style="margin-top: 60rpx;font-size: 28rpx;">
					门店名称：蚂蚁摄影MaE</h3>
				<div
					style="width: calc(100% - 60rpx);margin-left:30rpx;height: 1px;background: black;margin-top: 10rpx;">
				</div>
			</view>
			<view class="canvas" style="padding-top: 40rpx;margin-left: calc(50% - 80px);">
				<canvas canvas-id="qrcode" style="position: absolute;left: -1000px;"
					:style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
				<image :show-menu-by-longpress='true' style="width: 160px;height: 160px;" :src="PromotionCode"
					v-if="PromotionCode" alt=""></image>
			</view>
			<view
				style="display: flex;justify-content: center;margin-top: 40rpx;width: calc(100% - 110rpx);margin-left: 70rpx;margin-right: 40rpx;"
				class="step">
				<view style="display: grid;">
					<img :src="q_xc" alt="">
					<h5 style="margin-left: -50rpx;margin-top: 20rpx;font-size: 24rpx;">保存图片到相册</h5>
				</view>
				<img class="rightArrow" :src="q_r" alt="">
				<view style="display: grid;">
					<img :src="q_zfb" alt="">
					<h5 style="margin-left: -26rpx;margin-top: 20rpx;font-size: 24rpx;">打开支付宝</h5>
				</view>
				<img class="rightArrow" :src="q_r" alt="">
				<view style="display: grid;">
					<img :src="q_s" alt="">
					<h5
						style="margin-left: -32rpx;margin-top: 20rpx;text-align: center;line-height: 40rpx;font-size: 24rpx;">
						扫一扫-相册-<br>选取该图片</h5>
				</view>
			</view>
		</view>
		<view style="text-align: center;margin-top: 40rpx;">
			<h5 style="color: #0B0B0B;font-size: 24rpx;">截屏保存至相册，使用支付宝扫码或识别图片去支付</h5>
			<view style="display: flex;justify-content: center;margin-top: 40rpx;">
				<view class='backbtn' @click="toBack()">返回</view>
				<view class='paybtn' @click="finishPay()">已完成支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryPayResultForQrCode
	} from '@/api/order.js';
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default {
		components: {

		},
		data() {
			return {
				alipayRequest: '',
				payFee: '',
				orderNo: '',
				qrcodeSize: 160,
				PromotionCode: '', //二维码图片
				q_logo: 'https://pic.mae.vip//crmebimage/public/maintain/2023/12/04/e8eb7973c10c448d844c56fe63af2a6axu1dajd3qy.png',
				q_r: 'https://pic.mae.vip//crmebimage/public/maintain/2023/12/04/df76d26b592746ffb547b27fa3beab8dlr1ax1obd1.png',
				q_s: 'https://pic.mae.vip//crmebimage/public/maintain/2023/12/04/497dc19f58504bc3b8d11fed13db99e54c3vwx36uz.png',
				q_xc: 'https://pic.mae.vip//crmebimage/public/maintain/2023/12/04/5de9403cc8fd4c4ebbaf4f3270c2e91canbv4nhuoe.png',
				q_zfb: 'https://pic.mae.vip//crmebimage/public/maintain/2023/12/04/a75097cbf2c644fe8950103e56c33dce78hx0kk3os.png',
			};
		},
		onLoad(option) {
			this.payFee = option.payFee;
			this.alipayRequest = option.alipayRequest;
			this.orderNo = option.orderNo;
			this.make(this.alipayRequest);
			//console.log('!!!!!!!!!!!!!!!!!!!!' + this.alipayRequest);
		},
		onReady() {

		},
		methods: {
			finishPay() {
				let that = this;
				queryPayResultForQrCode(that.orderNo).then(res => {
					//console.log('支付宝###' + JSON.stringify(res))
					if (res.data === false) {
						that.$util.Tips({
							title: '订单未支付！'
						});
					} else {
						uni.navigateTo({
							url: '/pages/users/alipay_return/alipay_return?out_trade_no=' +
								that.orderNo + '&payChannel=' +
								'appAlipay'
						})
					}
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					});
				});
			},
			// 生成二维码；
			make(uid) {
				uQRCode.make({
					canvasId: 'qrcode',
					text: uid,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						//console.log('----***' + JSON.stringify(res))
						this.PromotionCode = res;
					},
					complete: () => {},
					fail: res => {
						this.$util.Tips({
							title: '二维码生成失败！'
						});
					}
				})
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.backbtn {
		width: 240rpx;
		height: 30px;
		line-height: 26px;
		border: 1px solid black;
		margin-right: 160rpx;
		color: black;
		font-weight: 600;
	}

	.paybtn {
		width: 240rpx;
		height: 30px;
		line-height: 26px;
		background: black;
		color: white;
		font-weight: 600;
	}

	.allPage {
		width: 100%;
		height: 100vh;
		background: white;
	}

	.step img {
		width: 60rpx;
		height: 60rpx;
		margin-right: 40rpx;
	}

	.rightArrow {
		width: 40rpx !important;
		height: 40rpx !important;
		margin-top: 10rpx;
	}
</style>

<style lang=" scss" scoped>

</style>